<template>
	<view class="health _div">
		<view class="wrap">
			<view class="health-item" @click="healthItemAction">
				<view class="head">
					<view class="title">
						<image class="img" src="https://ehealth.ipd.hihonor.com/etmcstatic/icon_weight_s.png"></image>
						<text class="text">体重检测</text>
					</view>
					<view class="date">{{weightInfo.date}}</view>
				</view>
				<view class="desc">
					<view class="weight">
						<view class="value">{{''+(weightInfo.weight||'-')+''}}<text class="unit">公斤</text>
						</view>
						<view class="label">体重</view>
					</view>
					<view class="rate">
						<view class="value">{{(weightInfo.bodyfat||'-')+''}}<text class="unit">%</text>
						</view>
						<view class="label">体脂率</view>
					</view>
					<view class="bmi">
						<view class="value">{{weightInfo.bmi||'-'}}</view>
						<view class="label">BMI</view>
					</view>
					<view class="btn" @click.stop="recordItemAction">记录</view>
				</view>
			</view>
			<view class="health-item blood" @click="bloodItemAction">
				<view class="head">
					<view class="title">
						<image class="img" src="https://ehealth.ipd.hihonor.com/etmcstatic/icon_blood_s.png"></image>
						<text class="text">血液</text>
					</view>
					<view class="date">{{bloodInfo.date}}</view>
				</view>
				<view class="body">{{bloodInfo.result}}</view>
				<view class="bottom">
					<image class="blood-embellishment-img"
						src="https://ehealth.ipd.hihonor.com/etmcstatic/blood-embellishment.png"></image>
					<image class="blood-img" src="https://ehealth.ipd.hihonor.com/etmcstatic/blood-test.png">
					</image>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	export default {
		data() {
			return {
				weightInfo: {
					date: "04/22",
					weight: 76.2,
					bodyfat: "27.1",
					bmi: 25.76,
				},
				bloodInfo: {
					date: "04/28",
					result: "全部健康"
				},
			}
		},
		onLoad() {

		},
		methods: {
			healthItemAction() {
				uni.navigateTo({
					url: '/pages/health/health'
				})
			},
			recordItemAction() {
				uni.navigateTo({
					url: '/pages/health/weightentry'
				})
			},
			bloodItemAction() {
				uni.navigateTo({
					url: '/pages/health/bloodes'
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f2f3f5;
		min-height: 100%;
		min-width: 100%;
	}

	.BebasNeueBold {
		font-family: BebasNeueBold;
	}

	.health .wrap {
		margin: 20rpx 26rpx;
	}

	.health .wrap .health-item {
		-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
		background: linear-gradient(180deg, #fff, #ceebe8);
		background-size: 100%;
		border-radius: 36rpx;
		box-sizing: border-box;
		cursor: pointer;
		margin-bottom: 16rpx;
		padding: 30rpx 24rpx;
	}

	.health .wrap .health-item:active {
		background: #ceebe8;
	}

	.health .wrap .health-item.blood {
		background: linear-gradient(180deg, #fff, #ffe0e0);
		background-size: 100%;
		padding-bottom: 20rpx;
	}

	.health .wrap .health-item.blood:active {
		background: #ffe0e0;
	}

	.health .wrap .health-item.blood .body {
		font-size: 30rpx;
		font-weight: 700;
		margin-bottom: 16rpx;
	}

	.health .wrap .health-item.blood .bottom {
		position: relative;
	}

	.health .wrap .health-item.blood .bottom .blood-embellishment-img {
		height: 30rpx;
		width: 212rpx;
	}

	.health .wrap .health-item.blood .bottom .blood-img {
		bottom: 0;
		height: 75rpx;
		position: absolute;
		right: 0;
		width: 72rpx;
	}

	.health .wrap .health-item .head {
		justify-content: space-between;
		letter-spacing: 2rpx;
		margin-bottom: 20rpx;
	}

	.health .wrap .health-item .head,
	.health .wrap .health-item .head .title {
		align-items: center;
		display: -webkit-flex;
		display: flex;
	}

	.health .wrap .health-item .head .title .img {
		height: 44rpx;
		margin-right: 16rpx;
		width: 44rpx;
	}

	.health .wrap .health-item .head .title .text {
		font-size: 32rpx;
		font-weight: 700;
	}

	.health .wrap .health-item .head .date {
		color: #727373;
		font-size: 20rpx;
	}

	.health .wrap .health-item .desc {
		align-items: center;
		display: -webkit-flex;
		display: flex;
		position: relative;
	}

	.health .wrap .health-item .desc .bmi,
	.health .wrap .health-item .desc .rate,
	.health .wrap .health-item .desc .weight {
		flex: 1;
	}

	.health .wrap .health-item .desc .bmi .value,
	.health .wrap .health-item .desc .rate .value,
	.health .wrap .health-item .desc .weight .value {
		font-size: 36rpx;
		font-weight: 700;
	}

	.health .wrap .health-item .desc .bmi .value .unit,
	.health .wrap .health-item .desc .rate .value .unit,
	.health .wrap .health-item .desc .weight .value .unit {
		font-size: 18rpx;
		font-weight: 400;
	}

	.health .wrap .health-item .desc .bmi .label,
	.health .wrap .health-item .desc .rate .label,
	.health .wrap .health-item .desc .weight .label {
		color: #727373;
		font-size: 28rpx;
	}

	.health .wrap .health-item .desc .btn {
		align-items: center;
		background-color: #27c6b5;
		border-radius: 36rpx;
		color: #fff;
		display: -webkit-flex;
		display: flex;
		font-size: 28rpx;
		height: 50rpx;
		padding: 0rpx 32rpx;
	}
</style>